<script lang="ts" setup>
import * as pdfjsLib from 'pdfjs-dist/legacy/build/pdf.js'
import PdfjsWorker from "pdfjs-dist/build/pdf.worker.js?worker";

import { onMounted } from "vue";

onMounted(() => {
  let url =
    "http://localhost:5168/api/File/download?file=BaiduNetdiskDownload\\freebook\\mix4\\Administrator\\Qi Jian Shi San Xia 1.PDF (12450)\\Qi Jian Shi San Xia 1.PDF - Administrator.pdf";

    pdfjsLib.GlobalWorkerOptions.workerPort = new PdfjsWorker()
  var loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then(function (pdf:any) {
    console.log(pdf)
    pdf.getPage(3).then(function (page:any) {
      var scale = 2;
      var viewport = page.getViewport({ scale: scale });

      var canvas = document.getElementById("myCanvas") as HTMLCanvasElement
      if(canvas){
      var context = canvas.getContext("2d");
      canvas.height = viewport.height;
      canvas.width = viewport.width;

      var renderContext = {
        canvasContext: context,
        viewport: viewport,
      };

      page.render(renderContext);
    }
    });
  });
});
</script>
<template>
  <canvas id="myCanvas"></canvas>
</template>
<style lang="scss" scoped>
</style>